<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
</head>
<body>
<div>发送消息</div>
<input type="text" id="msgContent"/>
<input type="button" value="点我发送" onclick="chat.chat1()"/>
<div>接受消息</div>
<div id="receiveMsg" style="background-color: gainsboro;"></div>
<script type="application/javascript">
    function uuid() {
        let s = [];
        let hexDigits = "0123456789abcdef";
        for (let i = 0; i < 36; i++) {
            s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
        }
        s[14] = "4"; // bits 12-15 of the time_hi_and_version field to 0010
        s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1); // bits 6-7 of the clock_seq_hi_and_reserved to 01
        s[8] = s[13] = s[18] = s[23] = "-";

        let uuid = s.join("");
        return uuid;
    }

    class Req {
        static req_type = 'login';

        constructor(props) {
            this.data = props.data;
            this.msgId = uuid();
            this.reqType = props.reqType;
        }

        static login(token) {
            return new Req({data: token, reqType: this.req_type});
        }

    }

    class Res{
        constructor(props) {
            this.code = props.code;
            this.message = props.message;
            this.data = props.data;
            this.msgId = props.msgId;
        }
    }

    class Data {
        static PROJECT_NAME = 'takeout';

        //1:服务器推送json, 无需响应 ,2.心跳包,3:请求包,需要响应,4:响应包
        static MSG_JSON = 0;
        static MSG_HEART = 1;
        static MSG_REQ = 2;
        static MSG_RES = 3;

        constructor(props) {
            this.projectName = Data.PROJECT_NAME;
            this.msgType = props.msgType;
            this.content = props.content;
            this.timestamp = new Date().getTime();
        }

        static toData(str) {
            return JSON.parse(str);
        }

        static loginReq(token) {
            return new Data({msgType: this.MSG_REQ, content: Req.login(token)});
        }

        static heart() {
            return new Data({msgType: this.MSG_HEART, content: 'heart beat'});
        }


    }


    window.chat = {
        socket: null,
        loginMsg: '',
        task: null,
        init: function () {
            if (window.WebSocket) {
                // chat.socket = new WebSocket("ws://127.0.0.1:443/ws");
                //https
                chat.socket = new WebSocket("wss://netty.scezu.com/ws");
                chat.socket.onopen = function () {
                    console.log("连接建立成功 准备登陆");
                    let loginData = Data.loginReq('zhyu123');
                    chat.loginMsg = loginData.content.msgId;
                    chat.sendData(loginData);
                    chat.task = window.setInterval(function (){
                       chat.sendData(Data.heart());
                    },30 * 1000);
                },
                    chat.socket.onclose = function () {
                        console.log("连接关闭");
                        window.clearInterval(chat.task);
                    },
                    chat.socket.onerror = function () {
                        console.log("连接出错");
                        window.clearInterval(chat.task);
                    },
                    chat.socket.onmessage = function (e) {
                        console.log("接受到消息" + e.data);
                        let receiveMsg = document.getElementById("receiveMsg");
                        let html = receiveMsg.innerHTML;
                        receiveMsg.innerHTML = html + "<br/>" + e.data;
                    }
            } else {
                alert("浏览器不支持协议");
            }

        },
        sendData: function(data) {
            var str = JSON.stringify(data);
           console.log('send message to data: ' + str);
           chat.socket.send(str);
        },
        chat1: function () {
            var msg = document.getElementById("msgContent");
            chat.socket.send(msg.value);
        }

    };
    chat.init();
</script>
</body>
</html>
